<template>
  <div class="music_playback" v-if="songItemAl.picUrl || songItemAl.img1v1Url">
    <van-sticky position="bottom" offset-bottom="0rem">
      <div class="footer">
        <div class="footerLeft" @click="showPopup">
          <img :src="songItemAl.picUrl ?? songItemAl.img1v1Url" alt="" />
          <div class="textLeft">
            <p class="textLeftP">{{ songItem.name }}</p>
            <!-- 歌单下标 -->
            <span>{{ songItemIndex }}横滑可以切换上下首哦~ </span>
          </div>
        </div>
        <div class="footerRight">
          <svg class="icon iconLB" aria-hidden="true" @click="play" v-if="!isPlay">
            <use xlink:href="#icon-bofang"></use>
          </svg>
          <svg class="icon iconLB" aria-hidden="true" @click="play" v-else>
            <use xlink:href="#icon-zanting"></use>
          </svg>
          <svg class="icon iconLB" aria-hidden="true">
            <use xlink:href="#icon-24gl-playlistMusic4"></use>
          </svg>
        </div>
        <audio
          ref="audio"
          autoplay
          loop
          :src="`https://music.163.com/song/media/outer/url?id=${songItem.id}.mp3`"
        ></audio>
      </div>
    </van-sticky>
    <van-popup
      closeable
      v-model:show="isShow"
      position="right"
      :style="{ height: '100%', width: '100%' }"
      close-icon-position="top-left"
      close-icon="exchange"
    >
      <music-popup :isPlay="isPlay" :audio="audio"></music-popup>
    </van-popup>
  </div>
</template>

<script lang="ts" setup>
import { computed, defineProps, withDefaults, watch, ref } from 'vue'
import { useStore } from '@/store'

import MusicPopup from '@/components/home/MusicPopup.vue'
// import cache from '@/utils/cache/cache'

const store = useStore()
// 拿到票 歌曲，专辑信息，列表下标
const songItem = computed(() => store.state.songList.songItem)
const songItemAl = computed(() => store.state.songList.songItemAl)
const songItemIndex = computed(() => store.state.songList.songItemIndex)

const dataList = computed(() => store.state.songList.songListData)
//拿到audio实例
const audio = ref()
console.log(audio)

//控制播放/暂停的图标
//并且控制歌词定时器
const isPlay = computed(() => store.state.songList.isPlay)
//控制遮罩层的显示与隐藏
const isShow = ref(false)
const showPopup = () => {
  isShow.value = !isShow.value
}
//将歌曲当前播放的时间传过去
const changePT = () => {
  store.commit('songList/changePresentTime', audio.value.currentTime)
  console.log(1)
}
const removeSET = () => {
  clearInterval(timer)
}
//接受定时器
let timer = 0
//播放
const play = () => {
  audio.value.autoplay = true
  if (!isPlay.value) {
    audio.value.play()
    store.commit('songList/changeIsPlayT')
    removeSET()
    timer = setInterval(changePT, 500)
  } else {
    audio.value.pause()
    store.commit('songList/changeIsPlayF')
    console.log(3)
    for (let i = 1; i <= timer; i++) {
      clearInterval(i)
    }
  }
}
console.log(audio)
//切歌实现的逻辑
watch(
  () => songItem.value,
  (newInfo) => {
    store.commit('songList/changeIsPlayT')
    removeSET()
    timer = setInterval(changePT, 500)
  }
)
</script>

<style lang="less" scoped>
.footer {
  width: 100%;
  height: 1.4rem;
  background-color: #fff;
  // position: fixed;
  bottom: 0;
  border-top: 1px solid #999;
  display: flex;
  padding: 0.1rem;
  justify-content: space-between;
  .footerLeft {
    flex: 7;
    height: 100%;
    display: flex;
    align-items: center;
    .textLeft {
      margin-left: 0.1rem;
      p {
        font-weight: 900;
        width: 4rem;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }
      span {
        font-weight: normal;
        color: #999;
      }
    }
    img {
      width: 1rem;
      height: 1rem;
      border: 1px solid transparent;
      border-radius: 0.5rem;
    }
  }
  .footerRight {
    flex: 2;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-around;
  }
}
</style>
<style>
.van-popup__close-icon {
  color: rgba(160, 6, 6, 0) !important;
}
</style>
